<template>
  <!--最大div-->
  <div class="max-div">
    <!--上部分div-->
    <div class="top-div">
      <div class="top-div-one">
        <!--第一个div-->
        <el-avatar :size="120" :src="avatarUrl" class="top-div-one-avatar"></el-avatar>
        <span class="top-div-one-avatar-spanOne">书记员</span>
        <span class="top-div-one-avatar-two">{{ realName }}</span>
      </div>
      <div class="top-div-two">
        <!--第二个div-->
        <img src="./image/totalquantity.png" class="top-div-two-img">
        <span class="top-div-two-spanOne">调解总数量</span>
        <span class="top-div-two-spanTwo">{{TotalMediation}}</span>
        <span class="top-div-two-spanthree">件</span>
      </div>
      <div class="top-div-three">
        <!--第三个div-->
        <img src="./image/tobemediated.png" class="top-div-three-img">
        <span class="top-div-three-spanOne">待调解</span>
        <span class="top-div-three-spanTwo">{{Tobemediated}}</span>
        <span class="top-div-three-spanthree">件</span>
      </div>
      <div class="top-div-four">
        <!--第四个div-->
        <img src="./image/successfulmediation.png" class="top-div-four-img">
        <span class="top-div-four-spanOne">调解成功</span>
        <span class="top-div-four-spanTwo">{{Successfulmediation}}</span>
        <span class="top-div-four-spanthree">件</span>
      </div>
      <div class="top-div-five">
        <!--第五个div-->
        <img src="./image/mediationfailure.png" class="top-div-five-img">
        <span class="top-div-five-spanOne">调解失败</span>
        <span class="top-div-five-spanTwo">{{Mediationfailure}}</span>
        <span class="top-div-five-spanthree">件</span>
      </div>
    </div>
    <!--下面部分div-->
    <div class="underneath-div">
      <!--搜索栏div-->
      <div class="underneath-div-top-div">
        <el-input v-model="keyword" placeholder="请输入会议名称" style="width: 300px; margin: 10px;"></el-input>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-select v-model="status" placeholder="请选择状态" style="width: 100px; margin-left: 10px;">
          <el-option label="待调解" value="0"></el-option>
          <el-option label="调解成功" value="1"></el-option>
          <el-option label="调解失败" value="-1"></el-option>
        </el-select>
        <el-date-picker v-model="selectedDate" type="date" placeholder="日期筛选"
                        style="width: 150px; margin-left: 10px;"></el-date-picker>
      </div>
      <!--会议列表div-->
      <div class="underneath-div-underneath-div">
        <!-- 会议列表内容 -->
        <el-row>
          <!--使用v-for遍历会议列表数据-->
          <el-col :span="8" v-for="(meeting, index) in displayedMeetings" :key="index">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>{{meeting.name}}</span>
                </div>
                  <div class="State" :style="{ color: getStatusColor(meeting.status) }">{{ getStatusText(meeting.status) }}</div>
              </template>
              <div class="card-ul-div">
                <ul>
                  <li>会议名称：{{ meeting.name }}</li>
                  <li>书记员：{{ meeting.clerk }}</li>
                  <li>调解日期：{{ meeting.date }}</li>
                </ul>
              </div>
              <el-button class="button-one">详情</el-button>
              <el-button class="button-two">模板</el-button>
              <el-button class="button-three">调解</el-button>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {ref,computed} from 'vue';

export default {
  name: "homepage",
  setup() {
    const avatarUrl = ref(""); // 用户头像地址
    const realName = ref(""); // 当前用户真实姓名
    const keyword = ref(""); // 搜索关键词
    const status = ref(""); // 状态
    const selectedDate = ref(""); // 选中的日期
    const meetingList = ref([
      {id: 1, name: "会议一", clerk: "书记员1", date: "2023-12-01", status: "0"},
      {id: 2, name: "会议二", clerk: "书记员2", date: "2023-12-02",status: "1"},
      {id: 3, name: "会议三", clerk: "书记员3", date: "2023-12-03",status: "-1"},
      {id: 3, name: "会议三", clerk: "书记员3", date: "2023-12-03",status: "0"},
      {id: 3, name: "会议三", clerk: "书记员3", date: "2023-12-03",status: "0"},
      {id: 3, name: "会议三", clerk: "书记员3", date: "2023-12-03",status: "1"},
      {id: 3, name: "会议三", clerk: "书记员3", date: "2023-12-03",status: "0"},
      {id: 3, name: "会议三", clerk: "书记员3", date: "2023-12-03",status: "1"},
      // 根据实际情况添加更多会议数据
    ]);

    // 计算最多展示6个会议
    const displayedMeetings = computed(() => {
      return meetingList.value.slice(0, 6);
    });
    //返回对应状态值
    const getStatusText = (status) => {
      if (status === "0") {
        return "待调解";
      } else if (status === "1") {
        return "调解成功";
      } else if (status === "-1") {
        return "调解失败";
      }
    };

    const search = () => {
      const filteredMeetings = meetingList.value.filter((meeting) => {
        return meeting.status === Number(status.value); // 将状态值转换为数字进行比较
      });
      // 更新展示的会议列表
      displayedMeetings.value = filteredMeetings.slice(0, 6);
    };

    return {
      avatarUrl,
      realName,
      keyword,
      status,
      selectedDate,
      search,
      meetingList,
      displayedMeetings,
      getStatusText,
    };
  },
  methods:{
    acquisitionBasis(){
      // 在这里获取用户头像地址和真实姓名的数据，并赋值给 avatarUrl 和 realName
      this.avatarUrl = "用户头像地址";
      this.realName = "张三";
      this.TotalMediation = 100;
      this.Tobemediated = 100;
      this.Successfulmediation = 100;
      this.Mediationfailure = 50;
    },
    //获取对应状态的字体颜色
    getStatusColor(status) {
      if (status === '0') {
        return '#f3b75c';
      } else if (status === '1') {
        return '#b3e19d';
      } else if (status === '-1') {
        return '#b6b4b4';
      }
    }
  },
  created() {
    //获取基础数据
    this.acquisitionBasis();
  }
}
</script>

<style scoped>
.max-div {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.top-div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20vh;
  background-color: #fff;
}

.top-div-one {
  background-color: #BEF5C8;
  flex: 1;
  height: 160px;
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.top-div-one-avatar {
  margin-left: 25px;
}
.top-div-one-avatar-spanOne{
  font-size: 25px;
  margin-left: 10px;
  margin-top: -50px;
  font-weight: bold;
  color: #2b85e4;
}
.top-div-one-avatar-two{
  font-size: 18px;
  margin-left: -60px;
  margin-top: 30px;
}
.top-div-two {
  background-color: #b3e19d;
  flex: 1;
  height: 160px;
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.top-div-two-img{
  margin-left: 50px;
}
.top-div-two-spanOne{
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
  margin-top: -60px;
}
.top-div-two-spanTwo{
  font-size: 35px;
  font-weight: bold;
  margin-left: -90px;
  margin-top: 40px;
}
.top-div-two-spanthree{
  font-weight: bold;
  margin-left: 10px;
  margin-top: 50px;
}

.top-div-three {
  background-color: #a74d4d;
  flex: 1;
  height: 160px;
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.top-div-three-img{
  margin-left: 50px;
}
.top-div-three-spanOne{
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
  margin-top: -60px;
}
.top-div-three-spanTwo{
  font-size: 35px;
  font-weight: bold;
  margin-left: -50px;
  margin-top: 40px;
}
.top-div-three-spanthree{
  font-weight: bold;
  margin-left: 10px;
  margin-top: 50px;
}

.top-div-four {
  background-color: #a0cfff;
  flex: 1;
  height: 160px;
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.top-div-four-img{
  margin-left: 50px;
}
.top-div-four-spanOne{
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
  margin-top: -60px;
}
.top-div-four-spanTwo{
  font-size: 35px;
  font-weight: bold;
  margin-left: -70px;
  margin-top: 40px;
}
.top-div-four-spanthree{
  font-weight: bold;
  margin-left: 10px;
  margin-top: 50px;
}

.top-div-five {
  background-color: #a5aeff;
  flex: 1;
  height: 160px;
  display: flex;
  align-items: center;
}
.top-div-five-img{
  margin-left: 50px;
}
.top-div-five-spanOne{
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
  margin-top: -60px;
}
.top-div-five-spanTwo{
  font-size: 35px;
  font-weight: bold;
  margin-left: -70px;
  margin-top: 40px;
}
.top-div-five-spanthree{
  font-weight: bold;
  margin-left: 10px;
  margin-top: 50px;
}

.underneath-div {
  width: 100%;
  height: 600px;
  background-color: #FFFFFF;
}

.underneath-div-top-div {
  background-color: #610909;
  width: 100%;
  height: 70px;
  margin-top: 10px;
}

.underneath-div-underneath-div {
  background-color: #895e5e;
  width: 100%;
  height: 510px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}
.State{
  display: flex;
  align-items: center;
  margin-left: 400px;
  margin-top: -20px;
  font-weight: bold;
  font-size: 16px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 98%;
  height: 230px;
}

.el-col {
  padding: 10px 5px;
}
.button-one {
  color: white;
  background-color: #b6b4b4;
  width: 80px;
  margin-left: 150px;
  margin-top: 10px;
}
.button-two {
  color: white;
  background-color: #80b9f6;
  width: 80px;
  margin-top: 10px;
}
.button-three {
  color: white;
  background-color: #2b85e4;
  width: 80px;
  margin-top: 10px;
}
.card-ul-div{
  font-size: 16px;
  font-weight: bold;
}
</style>
